<template>
    <div>
      <a-steps :current="current" style="width:50%;margin-left:25%;float:left;margin-top:50px">
          <a-step  v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-action" style="float:left;margin-left:7%;margin-top:50px">
          <a-button
            v-if="current>0"
            style="margin-left: 8px"
            @click="prev"
          >
            返回
          </a-button>
          <a-button
            v-if="current < steps.length - 1"
            type="primary" @click="next"
          >
            保存并继续设置
          </a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="submit"
          >
            提交
          </a-button>
        </div>
        <div class="steps-content" style="display:inline-block">
            <el-row :gutter="100" v-if="current==0" style="margin-top:50px">
                <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                    <el-card class="box-card" shadow="never">
                    <img src="../../../../assets/img/luckyTurntable/bgImg.png" style="width:100%" alt="">
                    </el-card>
                </el-col>
                <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
                    <el-card class="box-card" shadow="never">
                    <div>
                        <el-form
                        ref="dataForm"
                        :model="rowTemp"
                        label-position="right"
                        label-width="150px"
                        style="width: 900px; margin-left:50px;"
                        >
                        <el-form-item label="主办方及规则介绍：">
                          <div>
                            <div ref="editor"  style="text-align:left;margin: 5px">
              
                            </div>
                          </div>
                        </el-form-item>
                        <el-form-item label="兑奖说明:">
                            <div>
                            <div ref="editor1"  style="text-align:left;margin: 5px">
                            </div>
                          </div>
                        </el-form-item>
                        </el-form>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="100" v-if="current==1" style="margin-top:50px">
                <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                  <el-card class="box-card" shadow="never">
                  <img src="../../../../assets/img/luckyTurntable/bgImg.png" style="width:100%" alt="">
                  </el-card>
                </el-col>
                <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
                    <el-card class="box-card" shadow="never">
                    <div>
                        <div>
                          <p>
                            设置必看：<br>
                            1.中奖概率总和为100%。<br>
                            2.【谢谢参与】为固定项，不可删除，名称可自定义。<br>
                            3.中奖概率设置为0，那么该奖品不会被抽中。
                          </p>
                        </div>
                        <el-table
                          :data="detailsData"
                          style="margin-top:20px;"
                          border
                          >
                          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                          <el-table-column prop="prize" label="奖品" align="center"></el-table-column>
                          <el-table-column prop="number" label="奖品数量" align="center"></el-table-column>
                          <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                          <el-table-column label="奖品概率" align="center">
                              <template slot-scope="scope">
                              <span>{{ scope.row.prizeChance*100+'%' }}</span>
                              </template>
                          </el-table-column>
                          <el-table-column label="是否设置白名单" align="center">
                              <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.isWhite" @change="changeStatus(scope.row)"></el-checkbox>
                              <!-- <span>{{ scope.row.isWhite===true?'是':'否' }}</span> -->
                              </template>
                          </el-table-column>
                          <el-table-column prop="proInfoNum" label="中奖名单" align="center">
                              <template slot-scope="scope">
                                <el-button type="primary" plain size="small" @click="handleCheck(scope.row)">查看</el-button>
                              </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center" width="300px">
                              <template slot-scope="scope">
                                <el-button type="success" v-show="scope.row.isWhite===true" plain size="small" @click="handleWhite(scope.row)">添加白名单</el-button>
                                <el-button type="primary" plain size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                                <!-- <el-button type="danger" plain size="small" @click="delProinfo(scope.row)">删除</el-button> -->
                              </template>
                          </el-table-column>
                        </el-table>
                        <el-dialog
                          width="60%"
                          title="白名单"
                          :visible.sync="whiteVisible"
                          append-to-body>
                          <div>
                            <el-button type="primary" @click="innerVisible = true">添加内定人</el-button>
                          </div>
                          <el-table
                          :data="whiteData"
                          style="margin-top:20px;"
                          border
                          >
                          <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                          <el-table-column prop="userphone" label="内定名单" align="center"></el-table-column>
                          <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                                <el-button type="danger" plain size="small"  @click="delWhite(scope.row)">删除</el-button>
                              </template>
                          </el-table-column>
                          </el-table>
                          <div slot="footer" class="dialog-footer">
                            <el-button @click="whiteVisible = false">
                              返回
                            </el-button>
                          </div>
                          <el-dialog
                            width="50%"
                            title="添加白名单人员"
                            :visible.sync="innerVisible"
                            append-to-body>
                            <el-form
                              label-position="right"
                              label-width="150px"
                              style="width: 600px; margin-left:50px;"
                            >
                              <el-form-item label="内定人员：">
                                <el-input v-model='whitePeople'/>
                              </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                              <el-button @click="innerVisible = false">
                                返回
                              </el-button>
                              <el-button type="primary" @click="createWhite()">
                                确定
                              </el-button>
                            </div>
                          </el-dialog>
                        </el-dialog>
                            <el-dialog
                              width="60%"
                              title="中奖名单"
                              @close='load'
                              :visible.sync="checkVisible"
                              :close-on-click-modal="false"
                              append-to-body>
                              <el-table
                              :data="WinningData"
                              style="margin-top:20px;"
                              border
                              >
                              <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                              <el-table-column prop="mobile" label="APP账号" align="center"></el-table-column>
                              <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                              <el-table-column label="地址" align="center">
                                  <template slot-scope="scope">
                                  <span>{{ scope.row.address }}</span>
                                  </template>
                              </el-table-column>
                              <el-table-column label="领取状态" align="center">
                                  <template slot-scope="scope">
                                  <span>{{ scope.row.isReceive===true?'已领取':'未领取' }}</span>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" align="center" min-width="150px">
                                  <template slot-scope="scope">
                                    <el-button size="small" align="center" type="success" @click="showLogistics(scope.row)">查看物流信息</el-button>
                                    <el-button size="small" align="center" type="primary" @click="setupLogistics(scope.row)">设置物流信息</el-button>
                                  </template>
                              </el-table-column>
                              </el-table>
                              <pagination
                                v-show="total > 0"
                                :total="total"
                                :page.sync="winningList.pageNum"
                                :limit.sync="winningList.pageSize"
                                @pagination="getWinningList"
                              />
                              <el-dialog
                                width="40%"
                                :title="textMap1[logisticsStatus]"
                                :visible.sync="logisticsVisible"
                                :close-on-click-modal="false"
                                label-position='right'
                                append-to-body>
                                <el-form :model="TransByWinning" label-width="150px">
                                  <el-form-item label="物流公司名称:">
                                      <el-input :disabled="logisticsStatus==='see'?true:false" v-model="TransByWinning.transCo" style="width:80%"></el-input>
                                  </el-form-item>
                                  <el-form-item label="物流单号:">
                                      <el-input :disabled="logisticsStatus==='see'?true:false" v-model="TransByWinning.transNo" style="width:80%"></el-input>
                                  </el-form-item>
                              </el-form>
                                <div slot="footer" class="dialog-footer">
                                  <el-button @click="logisticsVisible = false">
                                    返回
                                  </el-button>
                                  <el-button @click="addTransByWinning" v-show="logisticsStatus==='setUp'?true:false">
                                    提交
                                  </el-button>
                                </div>
                              </el-dialog>
                              <div slot="footer" class="dialog-footer">
                                <el-button @click="checkVisible = false">
                                  返回
                                </el-button>
                              </div>
                            </el-dialog>
                            <el-dialog
                            width="60%"
                            :title="textMap[dialogStatus]"
                            :visible.sync="dialogFormVisible"
                            :close-on-click-modal="false"
                            @close="chearData"
                            append-to-body>
                            <el-form
                              ref="dataForm"
                              :model="tempGoods"
                              label-position="right"
                              label-width="240px"
                              style="width: 700px; margin-left:150px;"
                            >
                              <el-form-item label="奖品名称：" prop="remake">
                                <el-input v-model="tempGoods.prize"/>
                              </el-form-item>
                              <el-form-item label="奖品数量：" prop="remake">
                                <el-input v-model="tempGoods.number"/>
                              </el-form-item>
                              <el-form-item label="中奖概率：" prop="remake">
                                <el-input v-model="tempGoods.prizeChance"/>
                              </el-form-item>
                              <el-form-item label="奖品图片：" prop="helpMoney">
                                <el-upload
                                  class="avatar-uploader"
                                  action="http://10.0.0.123:10001/uploadImgUrl"
                                  :show-file-list="false"
                                  :on-success="handleAvatarSuccess"
                                  :http-request="customRequest">
                                  <img style="width:100px;height:100px" v-if="tempGoods.imagUrl" :src="tempGoods.imagUrl" class="avatar">
                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                              </el-form-item>
                              <el-form-item label="小康币奖品金额：" v-show="tempGoods.prizeType==='02'">
                                <el-input v-model="tempGoods.prizeNumber"/>
                              </el-form-item>
                              <el-form-item label="实物奖品物流费用：" v-show="tempGoods.prizeType==='03'">
                                <el-input v-model="tempGoods.totalFeel"/>
                              </el-form-item>
                              <el-form-item label="排序：">
                                <el-input v-model="tempGoods.sort"/>
                              </el-form-item>
                              <el-form-item label="小康币抵扣物流金额：" v-show="tempGoods.prizeType==='03'">
                                <el-input v-model="tempGoods.storageXkbFeel"/>
                              </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                              <el-button @click="dialogFormVisible = false">取 消</el-button>
                              <el-button
                                type="primary"
                                @click="updateCommodity()"
                              >
                                确定
                              </el-button>
                            </div>
                          </el-dialog>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="100" v-if="current==2" style="margin-top:50px">
                <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                    <el-card class="box-card" shadow="never">
                    <img src="../../../../assets/img/luckyTurntable/bgImg.png" style="width:100%" alt="">
                    </el-card>
                </el-col>
                <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
                    <el-card class="box-card" shadow="never">
                    <div>
                        <el-form
                        ref="dataForm"
                        label-position="right"
                        label-width="150px"
                        style="width: 900px; margin-left:50px;"
                        >
                        <el-form-item label="抽奖方式：">
                            <el-radio-group v-model="senior.drawType">
                              <el-radio-button label="1">扣减小康币</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="中奖名单：">
                            <el-radio-group v-model="senior.isOPen">
                              <el-radio-button :label="false">关闭</el-radio-button>
                              <el-radio-button :label="true">开启</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        </el-form>
                    </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    getList,firstUpdata,getDetails,getPrizeList,delProinfo,updateGoods,whiteList,
    delWhite,createWhite,seniorSetup,settings,addTransByWinning,showTransByWinning
} from "@/api/luckyTurntable/index";
import Pagination from "@/components/Pagination";
import E from 'wangeditor'
import { parseTime, formatDate } from "@/utils/index";
import { getToken } from '@/utils/auth';
import {addImg} from '@/api/headWheel'
// import { add, edit } from '@/api/dict'
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      editorContent:{},
      editorContent1:{},
      value1:'',
      templateSelection:'',
      current: 0,
      total:0,
      data1List:[],
      detailsData:[],
      senior:{},
      dialogFormVisible:false,
      checkVisible:false,
      WinningData:[],
      isShow:false,
      innerVisible:false,
      whiteVisible:false,
      whiteData:[],
      dialogStatus: '',
      whitePeople:'',
      GoodsName:'',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      logisticsStatus: '',
      logisticsVisible:false,
      textMap1: {
        see:'查看',
        setUp:'设置'
      },
      TransByWinning:{},
      delId:'',
      tempGoods:{
        
      },
      winningList:{
        pageSize:10,
        pageNum:1
      },
      rowTemp:{},
      newRowTemp:{},
      editor:"",
      editor1:'',
      WinningObj:{},
      turntablePrizeId:'',
      steps: [{
        title: '基本设置',
      }, {
        title: '奖品设置',
      }, {
        title: '高级设置',
      }],
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi'
    ])
  },
    created(){
        this.getList()
    },
   mounted() {
     console.log(123)
     //主办方及规则介绍
    this.editor = new E(this.$refs.editor)
    this.editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 不可修改
    this.editor.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    this.editor.customConfig.uploadFileName = 'file'
    this.editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
    this.editor.customConfig.onchange = (html) => {
      this.rowTemp.activityRules = html
    }
    this.editor.create()
    //兑奖说明
    this.editor1 = new E(this.$refs.editor1)
    this.editor1.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 不可修改
    this.editor1.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    this.editor1.customConfig.uploadFileName = 'file'
    this.editor1.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
    this.editor1.customConfig.onchange = (html) => {
      this.rowTemp.description = html
    }
    this.editor1.create()
  },
  
  methods: {
    //时间戳转日期格式
    parseTime,
    load(){
      this.winningList.pageNum=1
    },
    //修改白名单状态
    changeStatus(row){
      console.log(row)
      updateGoods(row).then(res=>{
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
          this.findDetail()
        }else{
          this.$notify({
            title: '失败',
            message: '修改失败',
            type: 'danger',
            duration: 2000
          })
        }
      })
    },
    //白名单
    handleWhite(row){
      this.whiteObj=row
      this.whiteVisible=true
      var id=row.id
      this.turntablePrizeId=row.id
      console.log(this.turntablePrizeId)
      whiteList(id).then(res=>{
        this.whiteData=res.data
      })
    },
    Refresh(){
      this.handleWhite(this.whiteObj)
    },
    //查看物流信息
    showLogistics(row){
      this.turntableWinningId=row.id
      this.logisticsStatus='see'
      this.logisticsVisible=true
      showTransByWinning(this.turntableWinningId).then(res=>{
        this.TransByWinning=res.data
      })
    },
    //设置物流信息
    setupLogistics(row){
      this.turntableWinningId=row.id
      this.logisticsStatus='setUp'
      this.logisticsVisible=true
      showTransByWinning(this.turntableWinningId).then(res=>{
        this.TransByWinning=res.data
      })
    },
    addTransByWinning(){
      var params={
        turntableWinningId:this.turntableWinningId,
        transNo:this.TransByWinning.transNo,
        transCo:this.TransByWinning.transCo
      }
      addTransByWinning(params).then(res=>{
        if(res.code==='200'){
          this.$notify({
            title: "成功",
            message: "成功添加单号和快递公司名称",
            type: "success"
          })
          this.logisticsVisible=false
          this.TransByWinning={}
        }else{
          this.$notify({
            title: "失败",
            message: "添加失败",
            type: "danger"
          })
          this.logisticsVisible=false
          this.TransByWinning={}
        }
      })
    },
    //删除
    delWhite(row){
      var id=row.id
      delWhite(id).then(res=>{
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.Refresh()
        }else{
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'danger',
            duration: 2000
          })
        }
      })
    },
    //添加白名单人员
    createWhite(){
      var params={
        turntablePrizeId:this.turntablePrizeId,
        userphone:this.whitePeople
      }
      //验证手机号
      var re = /^1\d{10}$/;
        let str = this.whitePeople;
        if(re.test(str)){
          this.$notify({
            title: "成功",
            message: "输入手机号成功",
            type: "success"
          })
          createWhite(params).then(res=>{
            if(res.code==='200'){
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              this.innerVisible=false
              this.Refresh()
            }else{
              this.$notify({
                title: '失败',
                message: '添加失败',
                type: 'danger',
                duration: 2000
              })
            }
          })
        }else {
          this.$notify({
            title: "失败",
            message: "手机号验证失败",
            type: "danger"
          })
        }
      // createWhite(params).then(res=>{
      //   if(res.code==='200'){
      //     this.$notify({
      //       title: '成功',
      //       message: '添加成功',
      //       type: 'success',
      //       duration: 2000
      //     })
      //     this.innerVisible=false
      //     this.Refresh()
      //   }else{
      //     this.$notify({
      //       title: '失败',
      //       message: '添加失败',
      //       type: 'danger',
      //       duration: 2000
      //     })
      //   }
      // })
    },
    //查看中奖名单
    handleCheck(row){
      this.WinningObj=row
      this.checkVisible=true
      var id=row.id
      var params={
        pageNum:this.winningList.pageNum-1,
        pageSize:this.winningList.pageSize
      }
      getPrizeList(params,id).then(res=>{
        console.log(res)
        this.total=res.data.totalElements
        this.WinningData=res.data.content
      })
    },
    getWinningList(){
      // this.winningList.pageNum=1
      this.handleCheck(this.WinningObj)
    },
    //奖品图片
    handleAvatarSuccess(res, file) {
        this.tempGoods.imagUrl = URL.createObjectURL(file.raw);
    },
    customRequest (data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.saveFile(formData)
    },
    saveFile (formData) {
      addImg(formData).then(res=>{
        // this.imageUrl=res.data
        this.$set(this.tempGoods, "imagUrl", res.data.filePath);
      })
    },
    getList(){
        getList().then(res=>{
            this.rowTemp=res.data
            this.editor.txt.html( '<p>' + this.rowTemp.activityRules + '</p>')
            this.editor1.txt.html( '<p>' + this.rowTemp.description + '</p>')
            // editor1.txt.html( '<p>' + this.description + '</p>')
        })
    },
    firstUpdata(){
        var params=this.rowTemp
        console.log(params)
        firstUpdata(params).then(res=>{
            console.log(res)
        })
    },
    next() {
      if(this.current===0){
          this.firstUpdata()
      }
      this.current++
      if(this.current===1){
        this.findDetail()
      }else if(this.current===2){
        seniorSetup().then(res=>{
          this.senior=res.data
        })
      }
      
    },
    prev() {
      this.current--
      if(this.current===0){
        this.reload()
      }
      if(this.current===1){
        this.findDetail()
      }
    },
    //奖品设置
    findDetail(){
      console.log(this.rowId)
      this.showDetailDialog = true;
      var params={
        pageNum:0,
        pageSize:10
      }
      getDetails(params).then(res=>{
        this.detailsData = res.data.content;
      })
    },
    //删除奖品
    delProinfo(row){
      this.delId=row.id
      delProinfo(this.delId).then(res=>{
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.findDetail()
        }else{
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'danger',
            duration: 2000
          })
        }
      })
    },
    //编辑
    chearData(){
      this.isShow=false
    },
    // singleElection (row) {
    //   this.templateSelection = this.data1List.indexOf(row);
    //   console.log(this.templateSelection)
    //   this.tempGoods.proMarketPrice=row.proMarketPrice
    //   this.tempGoods.proInfoName=row.proTitle
    //   this.tempGoods.proPriceId=row.proPriceId
    // },
    handleUpdate(row) {
      this.tempGoods = Object.assign({}, row)
      console.log(this.tempGoods)
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.isShow=true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    restGoods(){
      this.tempGoods= {
      }
    },
    updateCommodity(){
      this.tempGoods.sort =Number(this.tempGoods.sort)
      this.tempGoods.totalFeel =Number(this.tempGoods.totalFeel)
      this.tempGoods.storageXkbFeel =Number(this.tempGoods.storageXkbFeel)
      updateGoods(this.tempGoods).then((res) => {
        if(res.code==='200'){
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
          this.dialogFormVisible = false
          this.findDetail()
        }else{
          this.$notify({
            title: '失败',
            message: '修改失败',
            type: 'danger',
            duration: 2000
          })
        }
        // this.dialogFormVisible = false
      })
    },
    //修改高级设置
     submit(){
       console.log(this.senior.isOPen) 
       settings(this.senior).then(res=>{
         if(res.code==='200'){
           this.$notify({
             title: '成功',
             message: '修改成功',
             type: 'success',
             duration: 2000
           })
           this.reload()
         }else{
           this.$notify({
             title: '失败',
             message: '修改失败',
             type: 'danger',
             duration: 2000
           })
         }
       })
     }
  }
}
</script>

<style scoped>
  .editor-content{
    padding-left: 5px;
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
